<template>
  <div>
    <!-- 功能列表 -->
      <div v-if="showBtn">
        <ul class="toolList">
            <li v-for="(item, index) in $store.state.btnListCommon" @click="operate(item.BTNVALUE)">
              <el-button type="primary" :value="item.BTNSHOWNAME" v-text="item.BTNSHOWNAME"></el-button>
            </li>
          </ul>
      </div>
    <el-table
    border
    stripe
    :data="dataList"
    :show-summary="showSummary"
    @sort-change="sortChange"
    highlight-current-row
    @current-change="selectRow"
    :cell-style="tableRowClassName"
    :header-cell-style="tableRowClassNames"
    style="width: 100%; margin-bottom: 10px;"
    fixed
    :height= "height"
    :max-height="height"
    class='fontsize'
    :class="[this.SpaceNarrow ? 'SpaceNarrowclass' :'']"
    v-loading="this.$store.state.isloading" element-loading-text="拼命加载中"
    >
    <!-- 表头部分 -->
    <el-table-column type="index" v-if="isIndex" align="center">
    </el-table-column>

      <el-table-column label="操作" width="100" align="center" v-if="showColumn">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click.native.prevent="operate(item.BTNVALUE,scope.row)" :key="index" v-for="(item, index) in btnList">
            {{ item.BTNSHOWNAME }}
          </el-button>
          <el-button type="text" size="small" @click.native.prevent="operate(infos,scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>

      <!-- 铃铛 -->
      <el-table-column :label="clounmname" width="80" align="center" v-if="showWarning">
        <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :disabled="isshowwarn(scope)" :content="scope.row.MESSAGE" placement="top">
                <!-- <icon-svg style="font-size: 20px;" :icon-class="scope.row.REGLOGODESC ? 'warning' : 'nowarning'"></icon-svg> -->
                <icon-svg style="font-size: 20px;" :icon-class="changeClass(scope)"></icon-svg>
            </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
      :prop="item.ColumnKey"
      :label="item.ColumnName"
      :order="item.ColumnOrder"
      :align="item.ColumnAlign"
      :width="item.ColumnWidth" 
      :sortable="item.ColumnOrder==''?false:'custom'"
      :key="index"
      v-for="(item,index) in headList">   
        <template slot-scope="scope">
          <el-tooltip placement="top" :disabled="isshowwarns(scope)" effect="dark">
            <div slot="content">{{ scope.row[item.ColumnKey] }}</div>
            <div>{{item.ColumnName=='备注'? (scope.row[item.ColumnKey] && `${scope.row[item.ColumnKey].substring(0,20)}${scope.row[item.ColumnKey].length>20?'...':''}`):scope.row[item.ColumnKey]}}</div>
          </el-tooltip>
        </template>
        <el-table-column 
        :prop="item.ColumnKey"
        :label="item.ColumnName"
        :order="item.ColumnOrder"
        :align="item.ColumnAlign"
        :width="item.ColumnWidth" 
        :sortable="item.ColumnOrder==''?false:'custom'"
        :key="index"
        v-for="(item,index) in item.ColumnChild">  
          <el-table-column 
          :prop="item.ColumnKey"
          :label="item.ColumnName"
          :order="item.ColumnOrder"
          :align="item.ColumnAlign"
          :width="item.ColumnWidth" 
          :sortable="item.ColumnOrder==''?false:'custom'"
          :key="index"
          v-for="(item,index) in item.ColumnChild">   
          </el-table-column> 
        </el-table-column>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <div class="block" v-if="showPageOrder">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageOrder.currentPage"
        :page-size="pageOrder.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageOrder.totalNum" >
      </el-pagination>
    </div>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-pagination__sizes .el-select {
  width: 110px !important;
}
.el-table--border{
  top:10px;
}
.el-table /deep/ td{
  padding: 7px 0;
}

</style>
<script>
const INFO = "测试";
import apiBase from "@/api/apiBase.js";
export default {
  props: {
    dataList: {
      type: Array,
      default() {
        return [];
      }
    },
    headList: {
      type: Array,
      default() {
        return [
          {
            ColumnAlign: "center",
            ColumnKey: "",
            ColumnName: "暂无列项",
            ColumnOrder: "",
            showBtn: false,
            ColumnChild: {
              ColumnAlign: "center",
              ColumnKey: "",
              ColumnName: "暂无列项",
              ColumnOrder: "",
              ColumnWidth: 140,
                 ColumnChild: {
              ColumnAlign: "center",
              ColumnKey: "",
              ColumnName: "暂无列项",
              ColumnOrder: "",
            }
            }
          }
        ];
      }
    },
    btnList: {
      type: Array,
      default() {
        return [];
      }
    },
    pageOrder: {
      type: Object,
      default() {
        return {
          orderType: null,
          orderSort: null,
          totalNum: null,
          pageSize: 10,
          currentPage: 1
        };
      }
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    hiddenColumn: {
      type: Boolean,
      default: true
    },
    hiddenWarn: {
      type: Boolean,
      default: false
    },
    hiddenPageOrder: {
      type: Boolean,
      default: true
    },
    ColumnSortable: {
      type: String,
      default: "custom"
    },
    clounmnames: {
      type: String,
      default: "警告"
    },
    isIndex: {
      type: Boolean,
      default: true
    },
    //原来的550改成了600
    height: {
      type: String,
      default: "600"
    },
    infos: {
      type: String,
      default: "详情"
    }
  },
  watch: {
    hiddenColumn() {
      this.showColumn = this.hiddenColumn;
    },
    hiddenWarn() {
      this.showWarning = this.hiddenWarn;
    },
    clounmnames() {
      this.clounmname = this.clounmnames;
    },
    hiddenPageOrder() {
      this.showPageOrder = this.hiddenPageOrder;
    },
    ColumnSortable() {
      this.sortable = this.ColumnSortable;
    }
  },
  data() {
    return {
      type: null,
      sort: null,
      currentRow: null,
      showBtn: false,
      showColumn: this.hiddenColumn,
      showWarning: this.hiddenWarn,
      showPageOrder: this.hiddenPageOrder,
      sortable: this.ColumnSortable,
      clounmname: this.clounmnames,
      SpaceNarrow:false,
      FontColor:false,
    };
  },
  methods: {
    //排序
    sortChange(a, b, c) {
      for (var i in this.headList) {
        let item = this.headList[i];
        if (item.ColumnKey === a.prop) {
          this.pageOrder.orderType = item.ColumnOrder;
          break;
        }
      }
      if (a.order === "ascending") {
        this.pageOrder.orderSort = "TRUE";
        this.$emit("pageChange", this.pageOrder);
      } else {
        this.pageOrder.orderSort = "FALSE";
        this.$emit("pageChange", this.pageOrder);
      }
    },
    //当前选中行
    selectRow(row) {
      this.currentRow = row;
      console.log("currentRow", this.currentRow);
      this.$emit("selectRow", row, "");
    },
    //操作
    operate(order, row) {
      this.currentRow = row;
      this.$store.state.PTCRFCHDID = row.CHDID;
      this.$emit("selectRow", row, order);
    },

    // console.log(`每页 ${val} 条`);
    handleSizeChange(val) {
      this.pageOrder.pageSize = val;
      this.$emit("pageChange", this.pageOrder);
    },

    // console.log(`当前页: ${val}`);
    handleCurrentChange(val) {
      this.pageOrder.currentPage = val;
      this.$emit("pageChange", this.pageOrder);
    },
    //改变铃铛颜色
    changeClass(scope){
      if(scope.row.REGLOGODESC == 'B'){
        return 'warning'
      }else if(scope.row.REGLOGODESC == 'A'){
        return 'nowarning'
      }else if(scope.row.REGLOGODESC == 'C'){
        return 'warnYellow'
      }else{
        return 'nowarning'
      }
    },
    isshowwarn(scope){
      if(scope.row.REGLOGODESC == 'B'){
        return false //不显示提示
      }else if(scope.row.REGLOGODESC == 'A'){
        return true //显示提示
      }else if(scope.row.REGLOGODESC == 'C'){
        return false
      }
    },
    isshowwarns(scope){
      if(scope.column.label == '备注'){
        return false
      }else{
        return true
      }
    },
    // 控制table的边框颜色
    tableRowClassName(row){
      return false;
      if(row.rowIndex == 0){
        return 'border-left:1px solid black !important;border-right:1px solid black !important;border-bottom:1px solid black !important;';
      }
      return 'border:1px solid black !important';
    }, 
    // 控制表头的边框颜色
    tableRowClassNames(row){
      return false;
      return 'border:1px solid black !important';
    }, 
  },
  created(){
      // apiBase.DoService(
      // {},
      // apiBase.getApiAdress().Param.GetDefaultPageSize,
      // res => {
      // let PageSize = res.data.content;   
      // this.pageOrder.pageSize =parseInt(PageSize);
      // });
      apiBase.DoService(
      {},
      apiBase.getApiAdress().Param.GetIsPageSpaceNarrow,
      res => {
      this.SpaceNarrow=res.data.content;
      });
  },
  mounted() {
    let table = document.querySelectorAll('.fontsize');
    apiBase.DoService(
      {},
      apiBase.getApiAdress().Param.GetFontSize,
      res => {
        let cardata = res.data.content;
        if(cardata === 1){
          table[0].style.fontSize = '16px'
        }
      });

  },
  };
</script>
